<script setup lang="ts" name="tableComponent">
import { getListByConditionsWithPage, getSeachSelectOptions } from '@/api/method';
import type { Defect, Parameters } from '@/index.d';
import { useRequest } from 'vue-request';
import { useWindowSize } from '@vueuse/core';

const { height } = useWindowSize();

const maxTableHeight = computed(() => height.value - 100);

const {
  data: getNdeDefectListData,
  run: getNdeDefectListRun,
  loading: getNdeDefectListLoading
} = useRequest(() => getListByConditionsWithPage(searchCondition));

const tableRowClassName = ({ row }: { row: Defect }) => {
  if (row.isAcceptable) {
    return 'success-row';
  } else {
    return 'danger-row';
  }
};

const searchCondition = reactive<Defect>({
  id: 0,
  currentPage: 1,
  pageSize: 20,
  isAcceptable: undefined
});

watch(
  () => searchCondition,
  () => getNdeDefectListRun(),
  {
    immediate: true,
    deep: true
  }
);

const searchOptionList = reactive<{
  reportReference: Array<string>;
  productionReference: Array<string>;
  partType: Array<string>;
  makeMethod: Array<string>;
  testerName: Array<string>;
}>({
  reportReference: [],
  productionReference: [],
  partType: [],
  makeMethod: [],
  testerName: []
});

const initOptionList = (paramter: Parameters) => {
  getSeachSelectOptions(paramter).then(res => (searchOptionList[paramter] = res as Array<string>));
};

onMounted(() => {
  initOptionList('reportReference');
  initOptionList('productionReference');
  initOptionList('partType');
  initOptionList('makeMethod');
  initOptionList('testerName');
});

const resetQuery = () => {
  searchCondition.currentPage = 1;
  searchCondition.pageSize = 20;
  delete searchCondition.reportReference;
  delete searchCondition.productionReference;
  delete searchCondition.partType;
  delete searchCondition.makeMethod;
  delete searchCondition.isAcceptable;
  delete searchCondition.testerName;
};
</script>
<template>
  <div class="table-container">
    <div class="table-search">
      <el-row :gutter="5">
        <el-col :span="4">
          <el-select
            placeholder="报告编号"
            v-model="searchCondition.reportReference"
            clearable
            filterable
          >
            <el-option
              v-for="item in searchOptionList['reportReference']"
              :value="item"
              :key="item"
              :label="item"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            placeholder="生产令号"
            v-model="searchCondition.productionReference"
            clearable
            filterable
          >
            <el-option
              v-for="item in searchOptionList['productionReference']"
              :value="item"
              :key="item"
              :label="item"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="工件类型" v-model="searchCondition.partType" clearable>
            <el-option
              v-for="item in searchOptionList['partType']"
              :value="item"
              :key="item"
              :label="item"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="焊接方法" v-model="searchCondition.makeMethod" clearable>
            <el-option
              v-for="item in searchOptionList['makeMethod']"
              :value="item"
              :key="item"
              :label="item"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="是否合格" v-model="searchCondition.isAcceptable" clearable>
            <el-option value="true" label="合格" />
            <el-option value="false" label="不合格" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="检测人员" v-model="searchCondition.testerName" clearable>
            <el-option
              v-for="item in searchOptionList['testerName']"
              :value="item"
              :key="item"
              :label="item"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="table-body">
      <el-table
        :data="getNdeDefectListData?.records"
        v-loading="getNdeDefectListLoading"
        :row-class-name="tableRowClassName"
        flexible
        :max-height="maxTableHeight"
      >
        <el-table-column label="查看报告" prop="reportReference" :min-width="200" sortable>
          <template #default="{ row }">
            <el-link
              v-if="row.reportAttachmentLink"
              :href="row.reportAttachmentLink"
              target="_blank"
            >
              {{ row.reportReference }}
            </el-link>
            <span v-else>{{ row.reportReference }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工件名称" prop="partName" :min-width="300" sortable />
        <el-table-column label="工件编号" prop="partReference" :min-width="150" sortable />
        <el-table-column label="工件类型" prop="partType" :min-width="150" sortable />
        <el-table-column label="加工方法" prop="makeMethod" :min-width="150" sortable />
        <el-table-column label="缺陷类型" prop="defectType" :min-width="150" sortable />
        <el-table-column label="缺陷尺寸" prop="defectSize" :min-width="150" sortable />
        <el-table-column label="检测日期" prop="testDate" :min-width="150" sortable />
        <el-table-column label="检测人员" prop="testerName" :min-width="150" sortable />
      </el-table>
    </div>
    <div class="table-pager">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        :total="getNdeDefectListData?.total"
        v-model:current-page="searchCondition.currentPage"
        v-model:page-size="searchCondition.pageSize"
      />
    </div>
  </div>

  <el-button
    class="float-button"
    icon="Refresh"
    circle
    plain
    size="large"
    @click="resetQuery"
    type="success"
  />
</template>

<style lang="scss">
.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

<style lang="scss" scoped>
.table-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .table-search,
  .table-pager {
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .table-body {
    flex: 1;
  }
}

.float-button {
  position: absolute;
  z-index: 9999;
  right: 30px;
  bottom: 30px;
}
</style>
